<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Anchor 锚点</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
<style>
.my-contai{
	float: right;
	margin-right: 500px;
	margin-top: 50px;
}
</style>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" id="part1" orientation="left">自己总结的</a-divider><!-- =============================================================== -->
	<p class="desc">最靠谱的用法。</p>
	<a-anchor :items="items" wrapper-class="my-contai" :target-offset="targetOffset2"></a-anchor>
	
	
	<a-divider class="a-divi" id="part2" orientation="left">基本使用</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法。</p>
	<a-anchor :affix="false" :items="items1"></a-anchor>
	
	
	<a-divider class="a-divi" id="part3" orientation="left">静态位置</a-divider><!-- =============================================================== -->
	<p class="desc">不浮动，状态不随页面滚动变化。</p>
	<a-anchor :affix="false" :items="items2"></a-anchor>
	
	
	<a-divider class="a-divi" id="part4" orientation="left">自定义锚点高亮</a-divider><!-- =============================================================== -->
	<p class="desc">自定义锚点高亮。</p>
	<a-anchor :affix="false" :get-current-anchor="getCurrentAnchor" :items="items3"></a-anchor>
	
	
	<a-divider class="a-divi" id="part5" orientation="left">监听锚点链接改变</a-divider><!-- =============================================================== -->
	<p class="desc">监听锚点链接改变。（推荐使用：自定义 click 事件）</p>
	<a-anchor :affix="false" :items="items4" @change="onChange"></a-anchor>
	
	
	<a-divider class="a-divi" id="part6" orientation="left">横向 Anchor</a-divider><!-- =============================================================== -->
	<p class="desc">横向 Anchor。</p>
	<div style="padding: 20px;">
		<a-anchor direction="horizontal" :items="items5"></a-anchor>
	</div>
	
	
	<a-divider class="a-divi" id="part7" orientation="left">自定义 click 事件</a-divider><!-- =============================================================== -->
	<p class="desc">点击锚点不记录历史。（推荐使用）</p>
	<a-anchor :affix="false" :items="items6" @click="handleClick"></a-anchor>
	
	
	<a-divider class="a-divi" id="part8" orientation="left">设置锚点滚动偏移量</a-divider><!-- =============================================================== -->
	<p class="desc">锚点目标滚动到屏幕正中间。</p>
	<a-anchor :affix="false" :target-offset="targetOffset" :items="items7"></a-anchor>
	
	
	
	
	<a-divider class="a-divi" id="part9" orientation="left">API#</a-divider><!-- =============================================================== -->
API#
#
Anchor Props #
成员	说明	类型	默认值	版本
affix	固定模式	boolean	true	
bounds	锚点区域边界	number	5(px)	
getContainer	指定滚动的容器	() => HTMLElement	() => window	
getCurrentAnchor	自定义高亮的锚点	(activeLink: string) => string	-	activeLink(3.3)
offsetBottom	距离窗口底部达到指定偏移量后触发	number		
offsetTop	距离窗口顶部达到指定偏移量后触发	number		
showInkInFixed	:affix="false" 时是否显示小方块	boolean	false	
targetOffset	锚点滚动偏移量，默认与 offsetTop 相同，例子	number	offsetTop	1.5.0
wrapperClass	容器的类名	string	-	
wrapperStyle	容器样式	object	-	
items	数据化配置选项内容，支持通过 children 嵌套	{ key, href, title, target, children }[] 具体见	-	4.0
direction	设置导航方向	vertical | horizontal	vertical	4.0
customTitle	使用插槽自定义选项 title	v-slot="AnchorItem"	-	4.0

AnchorItem #
成员	说明	类型	默认值	版本
key	唯一标志	string | number	-	
href	锚点链接	string	-	
target	该属性指定在何处显示链接的资源	string	-	
title	文字内容	VueNode | (item: AnchorItem) => VueNode	-	
children	嵌套的 Anchor Link，注意：水平方向该属性不支持	AnchorItem[]	-	

事件 #
事件名称	说明	回调参数	版本	
change	监听锚点链接改变	(currentActiveLink: string) => void		1.5.0
click	click 事件的 handler	Function(e: MouseEvent, link: Object)		

Link Props #
成员	说明	类型	默认值	版本
href	锚点链接	string		
target	该属性指定在何处显示链接的资源。	string		1.5.0
title	文字内容	string|slot
	
</div>
<div class="h1000"></div>

</body>
<script>
const Main = {
data() {
	return {
		Vue: Vue,
		targetOffset2: null,
		items: [
			{key: 'p1', href: '#part1', title: '自己总结的',},
			{key: 'p2', href: '#part2', title: '基本使用',},
			{key: 'p3', href: '#part3', title: '静态位置',},
			{key: 'p4', href: '#part4', title: '自定义锚点高亮',},
			{key: 'p5', href: '#part5', title: '监听锚点链接改变',},
			{key: 'p6', href: '#part6', title: '横向 Anchor',},
			{key: 'p7', href: '#part7', title: '自定义 click 事件',},
			{key: 'p8', href: '#part8', title: '设置锚点滚动偏移量',},
			{key: 'p9', href: '#part9', title: () => Vue.h('span', { style: 'color: red' }, 'API#'),},
		],
		
		items1: [
			{key: 'part-1', href: '#part-1', title: () => Vue.h('span', { style: 'color: red' }, 'Part 1'),},
			{key: 'part-2', href: '#part-2', title: 'Part 2',},
			{key: 'part-3', href: '#part-3', title: 'Part 3',},
		],
		
		items2: [
			{key: '1', href: '#components-anchor-demo-basic', title: 'Basic demo',},
			{key: '2', href: '#components-anchor-demo-static', title: 'Static demo',},
			{
				key: '3', href: '#api', title: 'API',
				children: [
					{key: '4', href: '#anchor-props', title: 'Anchor Props',},
					{key: '5', href: '#link-props', title: 'Link Props',},
				],
			},
		],
		
		items3: [
			{ key: '1', href: '#components-anchor-demo-basic', title: 'Basic demo9', },
			{ key: '2', href: '#components-anchor-demo-static', title: 'Static demo', },
			{
				key: '3', href: '#api', title: 'API',
				children: [
					{ key: '4', href: '#anchor-props', title: 'Anchor Props', },
					{ key: '5', href: '#link-props', title: 'Link Props', },
				],
			},
		],
		
		items4: [
			{ key: '1', href: '#components-anchor-demo-basic', title: 'Basic demo', },
			{ key: '2', href: '#components-anchor-demo-static', title: 'Static demo', },
			{
				key: '3', href: '#api', title: 'API',
				children: [
					{ key: '4', href: '#anchor-props', title: 'Anchor Props', },
					{ key: '5', href: '#link-props', title: 'Link Props', },
				],
			},
		],
		
		items5: [
			{key: 'horizontally-part-1',href: '#horizontally-part-1',title: 'Part 1',},
			{key: 'horizontally-part-2',href: '#horizontally-part-2',title: 'Part 2',},
			{key: 'horizontally-part-3',href: '#horizontally-part-3',title: 'Part 3',},
			{key: 'horizontally-part-4',href: '#horizontally-part-4',title: 'Part 4',},
			{key: 'horizontally-part-5',href: '#horizontally-part-5',title: 'Part 5',},
			{key: 'horizontally-part-6',href: '#horizontally-part-6',title: 'Part 6',},
		],
		
		items6: [
			{key: '1',href: '#components-anchor-demo-basic',title: 'Basic demo',},
			{key: '2',href: '#components-anchor-demo-static',title: 'Static demo',},
			{
				key: '3',href: '#api',title: 'API',
				children: [
					{key: '4',href: '#anchor-props',title: 'Anchor Props',},
					{key: '5',href: '#link-props',title: 'Link Props',},
				],
			},
		],
		
		targetOffset: null,
		items7: [
			{key: '1',href: '#components-anchor-demo-basic',title: 'Basic demo',},
			{key: '2',href: '#components-anchor-demo-static',title: 'Static demo',},
			{
				key: '3',href: '#api',title: 'API',
				children: [
					{key: '4',href: '#anchor-props',title: 'Anchor Props',},
					{key: '5',href: '#link-props',title: 'Link Props',},
				],
			},
		]
		
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		
		this.targetOffset = window.innerHeight / 2;
		this.targetOffset2 = 50;		//让锚点距离视口上边界一定的像素
		// console.log(this.targetOffset);
		
		
	});
	// console.log("实例挂载完成后被调用2");
},
computed:{
	getCurrentAnchor(){
		return function(){
			return '#components-anchor-demo-static';
		}
	}
},
methods:{
	onChange(link){
		console.log('跳转到：', link);
	},
	handleClick(e, link){
		// e.preventDefault();
		// console.log(e);
		console.log(link);
	}
	
}
}

const app = Vue.createApp(Main);
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
